require('../../less/controls/pager.less');
var React = require('react');

module.exports = React.createClass({
	displayName:'Pager',
	getInitialState:function(){
		return {
			currIndex: null
		}
	},
	componentDidMount:function(){
		if(this.props.fireIndex != undefined){
			this.fireClick(this.props.fireIndex);
		}
	},
	__onItemClick: function (item, index){
		this.setState({ currIndex: index });
		this.props.onClick && this.props.onClick(item, index);
	},
	fireClick: function (index){
		this.__onItemClick(this.props.data[index], index);
	},
	__itemRender: function (item, index){
		var _content = null;
		if(this.props.itemRender){
			_content = this.props.itemRender(item, index);
		}
		if(!_content){
			_content = <ListViewItem key={index} {...item} />
		}

		return <li key={index} className={this.state.currIndex==index?'curr':''} onClick={()=>this.__onItemClick(item, index)}>{_content}</li>;
	},
	render:function(){
		return (
			<div className="c-pager">
				<ul className="pager-list">

				</ul>
			</div>
		);
	}
});
